<template>
    <div class="detail">
        <van-notice-bar color="#ffffff" :background="status>=2?'#fbd8bf':'#F17F2A'">
            <p :class="{'notice':true,'black':status>=2}">
                <span>订单编号：{{info.order_sn}}</span>
                <span>{{showState}}</span>
            </p>
        </van-notice-bar>
        <div class="info">
            <!-- <h3 class="title">
                <span>订单详情</span>
            </h3> -->
            <ul class="infoList">
                <li>
                    <span class="label">门票信息：</span>
                    <span class="msg">天士力大健康城参观门票</span>
                </li>
                <li>
                    <span class="label">门票类型：</span>
                    <span class="msg">散客预约</span>
                </li>
                <li>
                    <span class="label">参观时段：</span>
                    <span class="msg">{{info.t_date + ' ' +info.time_period}}</span>
                </li>
                <li>
                    <span class="label">下单时间：</span>
                    <span class="msg">{{info.add_time}}</span>
                </li>
                <li>
                    <span class="label">门票张数：</span>
                    <span class="msg">{{info.people_num}}张</span>
                </li>
                <li>
                    <span class="label">门票明细：</span>
                    <div class="msg detailed">
                        <p v-for="(item, index) in info.item&&info.item[0].tickets" :key="index">
                            <span>{{item.ticket_name}} <span class="money">¥ {{item.discount_price}}</span></span>
                            <span> ×{{item.nums}}</span>
                        </p>
                    </div>
                </li>
                <li class="total" v-if="info.child_count">
                    <span class="label">随行儿童：</span>
                    <span class="msg">{{info.child_count}}</span>
                </li>
                <li class="total">
                    <span class="label">门票金额：</span>
                    <div class="msg">
                        <span class="money">¥ {{info.order_amount}}</span>
                    </div>
                </li>
                <li class="total" v-if="parseFloat(info.yh_price)!=0">
                    <span class="label">优惠券：</span>
                    <div class="msg">
                        <span class="money">{{info.yh_price}}</span>
                    </div>
                </li>
                <li class="total">
                    <span class="label">总计金额：<span class="money">¥ {{info.order_amount}}</span></span>
                </li>
            </ul>
        </div>
        <div :class="['qrcode', status!=1?'disable':'']" v-show="i.jp_qrcode_code" v-for="i in tickets" :key="i.ticket_id">
            <div class="left">
                <p>天士力大健康城参观门票</p>
                <p>验证码：{{i.jp_qrcode_code}}</p>
            </div>
            <div class="right" @click="showQr(i)">
                <!-- <img src="../../../../static/img/erweima.png" alt=""> -->
            </div>
        </div>
        <div class="cancel">
            <!-- //退票 -->
            <div class="btn" @click="refund" v-if="status==1">
                取消预约
            </div>
            <div class="btn" @click="$router.push({path: 'personOrder',query: {orderId: torder_id}})" v-if="status==0">
                立即支付（{{minutes}}分{{seconds}}秒）
            </div>
            <div class="btn2" @click="cancel" v-if="status==0">
                取消预约
            </div>
            <div class="btn"  @click="$router.push('/personTicket')" v-if="status==2">
                再次预约
            </div>
            <div class="btn" @click="$router.push('/personTicket')" v-if="status==3||status==4">
                重新预约
            </div>
        </div>
        
        <van-overlay :show="show" :duration=".5">
            <div v-show="show" :class="['erweima']" >
                <div class="content">
                    <p>天士力大健康城参观门票</p>
                    <p>验证码：{{qrURL}}</p>
                    <div class="qr">
                        <img :src="qrImg" alt="">
                    </div>
                </div>
                <div class="close" @click="show = false">

                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
    import { myTicketDetail, cancelTicket, refundTicketorder } from '../../../http/interface'
    import {Dialog} from 'vant'
    // const status = [
    //     {
    //         name: '待支付',
    //         id: 0
    //     },
    //     {
    //         name: '待检票',
    //         id: 1
    //     },
    //     {
    //         name: '已检票',
    //         id: 2
    //     },
    //     {
    //         name: '已取消',
    //         id: 3
    //     },
    //     {
    //         name: '已退票',
    //         id: 4
    //     }
    // ]
    export default {
        name: '',
        components: {
            // VueQrcode
        },
        data() {
            return {
                show: false,
                qrURL: '',
                torder_id: '',
                info: {
                    t_date: '',
                    time_period: ''
                },
                showState: '',
                toi_status: '',
                tickets: [],
                qrImg: '',
                countTimer: null,
                minutes: '0',
                seconds: '0'
            }
        },
        computed: {
            status() {
                if(this.toi_status) {
                    let status = this.toi_status
                    let can_refund = this.info.can_refund
                    //1待审核，2待付款，3已完成（已付款），5已取消，6已退款
                    if(status==2) {
                        return 0
                    }else if(status==3&&can_refund) {
                        return 1
                    }else if(status==3&&!can_refund){
                        return 2
                    }else if(status==5){
                        return 3
                    }else if(status==6){
                        return 4
                    }
                }
            }
        },
        mounted() {
            let api_token = this.$route.query.api_token
            if(api_token) {
                localStorage.setItem('api_token', this.$route.query.api_token || '');
            }
            this.torder_id = this.$route.query.torder_id
            this.getDetail()
        },
        methods: {
            getDetail() {
                myTicketDetail(this.torder_id).then(res => {
                    if(res.status == 1) {
                        let info = res.data
                        this.info = info
                        this.showState = info.order_status_show
                        this.toi_status = info.order_status
                        this.tickets =info.item[0].tickets

                        if(this.status == 0) {
                            this.time(info.add_time)
                        }
                    }   
                })
            },
            showQr(item) {
                if(this.status==1) {//待检票时可以打开
                    this.qrURL = item.jp_qrcode_code
                    this.qrImg = item.jp_qrcode
                    this.show = true
                }else {

                }
            },
            cancel() {
                Dialog.confirm({
                    title: '确认取消订单',
                    message: '请确认是否取消订单',
                })
                .then(() => {
                    if(this.info.can_cancel) {
                        cancelTicket(this.torder_id).then(res => {
                            if(res.status == 1) {
                                this.getDetail()
                            }else {
                                this.$toast(res.msg)
                            }
                        })
                    }else {
                        this.$toast('不能取消')
                    }
                })
                .catch(() => {
                });
            },
            refund() {
                Dialog.confirm({
                    title: '确认取消预约',
                    message: '请确认是否取消预约',
                })
                .then(() => {
                    if(this.info.can_refund) {
                        let arr= []
                        for(let i=0;i<this.tickets.length;i++){
                            arr.push(this.tickets[i].titem_id)
                        }
                        let titem_ids = arr.join(',')
                        refundTicketorder(titem_ids).then(res => {
                            if(res.status == 1) {
                                this.getDetail()
                            }else {
                                this.$toast(res.msg)
                            }
                        })
                    }else {
                        this.$toast('不能取消')
                    }
                })
                .catch(() => {
                });
            },
            time(timeval) {
                let v = this
                let time = new Date(timeval.replace(new RegExp("-", "gm"), "/")).getTime()
                let now = new Date().getTime()
                if ((now - time) < 30*60*1000) {
                    let timeDown = () => {
                        let now = new Date().getTime()
                        let leftTime = 1800000 - (now - time);
                        let mm = parseInt(leftTime / 1000 / 60 % 60, 10);
                        let ss = parseInt(leftTime / 1000 % 60, 10);
                        v.minutes = mm < 10 ? ('0' + mm) : mm;
                        v.seconds = ss < 10 ? ('0' + ss) : ss;
                        if (parseInt(v.minutes) <= 0 && parseInt(v.seconds) <= 0) {
                            v.clearTimeCount()
                            this.$dialog.alert({
                                title: '提示',
                                message: '您的订单超时未支付，请重新购票',
                            }).then(() => {
                                // v.$router.replace('/orderTicket');
                                v.getDetail()
                            });
                            return;
                        }
                        return timeDown;
                    }
                    if (!v.countTimer) {
                        v.countTimer = setInterval(timeDown(), 1e3)
                    }
                }else {
                    this.$dialog.alert({
                        title: '提示',
                        message: '您的订单超时未支付，请重新购票',
                    }).then(() => {
                        // v.$router.replace('/orderTicket');
                    });
                }
            },
            clearTimeCount() {
                if (this.countTimer) { //如果定时器在运行则关闭
                    window.clearInterval(this.countTimer);
                    this.countTimer = null;
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../../style/mixin.scss";
    .detail{
        width: 100vw;
        margin: 0 auto;
        min-height: 100vh;
        background: #EEEEEE;
        /deep/ .van-notice-bar__content{
            width: 100%;
            .notice{
                width: 100%;
                display: flex;
                justify-content: space-between;
                &.black{
                    color: #323232;
                }
            }
        }
        .info{
            background: #ffffff;
            border-radius: 0 0 24px 24px;
            padding: 0 30px 30px 30px;

            .title{
                span{
                    font-size:32px;
                    font-weight:500;
                    color:rgba(50,50,50,1);
                    border-left: 6px solid #E60012;
                    text-indent: 30px;
                    display: inline-block;
                }
            }
            .infoList{
                // padding: 0 30px;
                // margin-top: 28px;
                li{
                    border-bottom: 1px solid #EEEEEE;
                    line-height: 98px;

                    font-size:30px;
                    font-weight:500;
                    color:#323232;
                    display: flex;
                    .label{
                        margin-right: 70px;
                    }
                    .msg{
                        color: #777777;
                        // flex: 1;
                        p{
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            color: #323232;
                        }
                    }
                    .money{
                        color: #E10028;
                    }
                    .detailed{
                        flex: 1;
                    }
                }
                .total{
                    border-bottom: none;
                    line-height: 1;
                    margin-top: 35px;
                    display: flex;
                    justify-content: space-between;
                    .msg{
                        // flex: auto;
                    }
                }
            }
        }
        .qrcode{
            width:750px;
            height:160px;
            background:rgba(255,255,255,1);
            border-radius:24px;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            .left{
                font-size:30px;
                font-weight:500;
                color:rgba(50,50,50,1);
                line-height: 60px;
            }
            .right{
                width: 96px;
                height: 96px;
                background: url('../../../../static/img/erweima.png') no-repeat center center;
                background-size: 100% 100%;
            }
            &.disable{
                .left{
                    color: #C1C1C1;
                }
                .right{
                    background: url('../../../../static/img/erweimadisable.png') no-repeat center center;
                    background-size: 100% 100%;
                }
            }
        }
        .cancel{
            min-height: 350px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            
            .btn{
                width:520px;
                height:78px;
                background: #f17f28;
                border-radius:39px;
                font-size:34px;
                font-weight:500;
                color:rgba(255,255,255,1);
                line-height:78px;
                text-align: center;
                margin-bottom: 48px;
            }
            .btn2{
                width:520px;
                height:78px;
                background: transparent;
                border: 2px solid rgba(241,127,42,1);;
                border-radius:39px;
                font-size:34px;
                font-weight:500;
                color:#F17F2A;
                line-height:78px;
                text-align: center;
                margin-bottom: 48px;
            }
        }
        .erweima{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            .content{
                width: 534px;
                height: 616px;
                background: url('../../../../static/img/erweimadibu.png') no-repeat center center;
                background-size: 100% 100%;
                font-size:30px;
                font-weight:500;
                color:rgba(50,50,50,1);
                line-height: 60px;
                text-align: center;
                padding: 29px;
                display: flex;
                flex-direction: column;
                align-items: center;
                .qr{
                    width: 360px;
                    height: 360px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .close{
                width: 74px;
                height: 74px;
                background: url('../../../../static/img/guanb.png') no-repeat center center;
                background-size: 100% 100%;
                margin-top: 96px;
            }
        }
    }
</style>